<template>
	<view >

	<wTitleBar title="轻松易挪" textColor="#fff" bgColor="none" textAlign="center"></wTitleBar>

<!-- 	<view style="padding-top: 40upx;">
	        <plate @listenPlateChange="plateChange" :defaultPlate="plateNumber" />
		
	</view>
	 -->
	 <view class="content"> 
		 <view class="headimg">
			 <image src="../../static/index_head.png"></image>
		 </view>
		 <view class="chepai">
			 <view style="float: left; margin-top: 20rpx;width: 10rpx;height: 10rpx;background: white;border-radius:5rpx;"></view>
			 <view style="float: left;margin-left: -10rpx; margin-top: 90rpx;width: 10rpx;height: 10rpx;background: white;border-radius:5rpx;"></view>
			 <view style="float: right;margin-left: 20rpx; margin-top: 20rpx;width: 10rpx;height: 10rpx;background: white;border-radius:5rpx;"></view>
			 <view style="float: right;margin-right: -30rpx; margin-top: 90rpx;width: 10rpx;height: 10rpx;background: white;border-radius:5rpx;"></view>

		 	{{carnumber}}
		 </view>
		 <view class="toast">
		 	<view class="toast_one">
		 		<u-button type="success"@click="getPhone()" plain>电话联系</u-button>
		 		
		 	</view>
			<view class="toast_one" >
				<u-button type="warning" @click="sendSms()" plain>短信通知</u-button>
			</view>
		 </view>
		 <view class="fenge">
		 	 <u-line color="#33b558" border-style="dashed" hair-line="false"></u-line>
		 </view> 
		 <view class="buy">
		 	<view class="avatar">
		 		<image class="buy_avatar" src="../../static/t1.jpeg" mode=""></image>
				<image class="buy_avatar" style="left: -20rpx;" src="../../static/t2.jpeg" mode=""></image>
				<image class="buy_avatar" style="left: -40rpx;" src="../../static/t3.jpeg" mode=""></image>
				<image class="buy_avatar" style="left: -60rpx;" src="../../static/t4.jpeg" mode=""></image>
		 	</view>
			<view class="buy_tit">
				2.3W人人已经申请同款挪车码
			</view>
		 </view>
	 </view>	
	 <view class="middle">
	 	<view class="mid_list">
	 		<view class="list_tit">
	 			隐私保护
	 		</view>
			<view class="list_sec">
				双向匿名拨打电话信息无泄漏
			</view>
			<image src="../../static/safe.png" mode=""></image>
	 	</view>
		<view class="mid_list">
			<view class="list_tit">
				多种方式
			</view>
			<view class="list_sec">
				电话短信多通道通知挪车人
			</view>
			<image src="../../static/td.png" mode=""></image>
		</view>
	 </view>
	 <view class="home" @click="toHome">
	 	<image src="../../static/home.png" mode=""></image>
		<view class="home_tit">
			我的
		</view>
	 </view>
		
		
		
		
		<view class="footer">本服务由 致一网络科技工作室 提供</view>
		<u-toast ref="uToast" />
		<u-popup v-model="showPhone" mode="bottom">
			<view class="phone_cont">
				<view class="phone_tit"><u-alert-tips type="error" :title="toastData.title" :description="toastData.description"></u-alert-tips></view>
				<view class="phone_fjh">{{phone_fj}}</view>
				<u-button type="success" @click="callPhone()">拨打电话</u-button>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import wTitleBar from '../../components/w-titleBar/w-titleBar.vue'
	import plate from '../../components/plate/index.vue'
	export default {
		components: {
		            plate,wTitleBar
		        },
		data() {
			return {
				carnumber:'',
				cardid:'',
				state:1,
				showPhone:false,
				toastData:{
					title:'注意事项',
					description:'为了保护隐私，我们采用虚拟号码拨号，请牢记分机号，接通后按分机号+"#"转接至车主电话,三分钟内有效，超时请重新扫码。'
				},
				phone:'',
				phone_fj:''
			}
		},
		onLoad(data) {
			if(!data.cardid){
				this.$refs.uToast.show({
					title: '异常错误',
				})
				setTimeout(()=>{
					uni.navigateTo({
						url:'../home/home'
					})
				},1000)
			}
			this.cardid=data.cardid;
			this.getCardMsg(data.cardid);
		},
		onShow() {
			if(!this.state){
				this.getCardMsg(this.cardid);
			}
		},
		methods: {
			toHome(){
				uni.navigateTo({
					url:'../home/home'
				})
			},
			getCardMsg(cardid){
				uni.request({
					url:this.$config.baseApi+'card/getcard',
					data:{cardid:cardid},
					method:'POST',
					dataType:'json',
					success: (res) => {
						const cardData=res.data;
						if(!cardData.code){
							this.$refs.uToast.show({
								title: cardData.msg,
								type:'error'
							})
							setTimeout(()=>{
								uni.navigateTo({
									url:'../home/home'
								})
							},1000)
						}
						if(cardData.data.state==0){
							this.state=0;
							uni.navigateTo({
								url:'../band/band?cardid='+cardData.data.cardid
							})
							return;
						}
						this.carnumber=cardData.data.carnumber
					}
				})
			},
			sendSms(){
				const cardid=this.cardid;
				uni.request({
					url:this.$config.baseApi+"user/sendsms",
					data:{cardid},
					method:'POST',
					dataType:'json',
					success: (res) => {
						const retData=res.data;
						if(!retData.code){
							this.$refs.uToast.show({
								title: retData.msg,
								type:'error'
							})
							return;
						}
						this.$refs.uToast.show({
							title: retData.msg,
							type:'success'
						})
					}
				})
			},
			getPhone(){
				const cardid=this.cardid;
				if(!this.phone){
					uni.showLoading({});
					uni.request({
						url:this.$config.baseApi+"user/getphone",
						data:{cardid},
						method:'POST',
						dataType:'json',
						success: (res) => {
							uni.hideLoading();
							const retData=res.data;
							if(!retData.code){
								if(retData.msg=='isv.NO_AVAILABLE_NUMBER'){
									this.$refs.uToast.show({
										title: "请于三分钟后再试",
										type:'error'
									})
								}else{
									this.$refs.uToast.show({
										title: retData.msg,
										type:'error'
									})
								}
								
								return;
							}
							this.phone=retData.data.SecretNo;
							this.phone_fj=retData.data.Extension;
							this.showPhone=true;
						}
					})
				}else{
					this.showPhone=true;
				}
				
				
			},
			callPhone(){
				if(!this.phone){
					this.$refs.uToast.show({
						title: "未知号码",
						type:'error'
					})
					return;
				}
				uni.makePhoneCall({
					phoneNumber:this.phone
				})
			}
		}
	}
</script>

<style>
	page{
		background: -webkit-linear-gradient(top,rgb(4 181 244),#56f5df,white);
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 95%;
		margin: auto;
		border-radius: 10rpx;
		background-color: white;
	}
	.headimg{
		width: 100%;
		margin-top: 20rpx;
		height: 80rpx;
		background-color: white;
		margin-bottom: 40rpx;
	}
	.headimg image{
		width: 100%;
		height: 80rpx;
	}
	.chepai{
		background-color: #2196F3;
		text-align: center;
		font-size: 60rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		border-radius: 6rpx;
		color: white;
		letter-spacing: 10rpx;
		line-height: 120rpx;
		height: 120rpx;
		min-width: 400rpx;
	}

	.toast{
		display: flex;
		width: 80%;
		margin: auto;
		margin-top: 20rpx;

	}
	.toast_one{
		flex: 1;
		margin: 20rpx;
	}
	.fenge{
		width: 95%;
		margin: auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		
		
	}
	.buy{
		display: flex;
		height:80rpx ;
		
	}
	.avatar{
		width: 240rpx;
	}
	.buy_avatar{
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		position: relative;
	}
	.buy_tit{
		color: #999;
		font-size: 26rpx;
		line-height: 60rpx;
		text-align: left;
		flex: 1;
	}
	
	
	.middle{
		width: 90%;
		margin: auto;
		margin-top: 40rpx;
		
	}
	.middle .mid_list{
		display: flex;
		height: 120rpx;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx短信 (1).png;
	}
	.mid_list .list_tit {
		font-size: 40rpx;
		margin-right: 20rpx;
		color: #007AFF;
		font-weight:bold;
	}
	.mid_list .list_sec{
		flex: 2;
		color: #999;
		font-size: 25rpx;
	}
	.mid_list image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 40rpx;
		float: right;
	}
	.home{
		width: 100rpx;
		height: 100rpx;
		padding: 10rpx;
		position: fixed;
		bottom: 80rpx;
		right: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #007AFF;
		border-radius: 50rpx;
	}
	.home image{
		width: 60rpx;
		height: 60rpx;
	}
	.home .home_tit{
		font-size: 22rpx;
		color: white;
	}
	.phone_cont{
		height: 500rpx;
		padding: 20rpx;
	}
	.phone_cont .phone_tit{
		text-align: center;
	}
	.phone_cont .phone_fjh{
		text-align: center;
		margin-top: 20rpx;
		font-size: 70rpx;
		padding: 10rpx;
		letter-spacing: 10rpx;
		border-radius: 6rpx;
	}
	
	
	.footer{
		width: 100%;
		position: fixed;
		bottom: 10rpx;
		color: #607D8B;
		text-align: center;
	}
</style>
